<!-- <template>
  <div>
    <apexchart
      width="450"
      type="bar"
      :options="chartOptions"
      :series="series"
    ></apexchart>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      chartOptions: {
        chart: {
          id: "vuechart-example",
        },
        xaxis: {
          categories: [
            "开发部",
            "测试部",
            "运营部",
            "人事部",
            "策划部",
            "财务部",
            "销售部",
            "忧杂货部",
          ],
        },
      },
      series: [
        {
          name: "series-1",
          data: [40, 50, 80, 30, 28, 50, 55, 18],
        },
      ],
    };
  },
};
</script>

<style>
</style> -->

<template>
  <el-row>
    <el-row>
      <el-col :span="24">
        <panel-group :stat="stat" :loading="loading"></panel-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="echart" id="mychart" :style="myChartStyle"></div>
      </el-col>

      <el-col :span="12">
        <div class="echart" id="pieChart" :style="pieChartStyle"></div>
      </el-col>

      <!-- <el-col :span="12">
        <apexchart
          ref="chart"
          class="apexchart"
          width="450"
          type="bar"
          :options="chartOptions"
          :series="dynamicLineChartOption.series"
        ></apexchart>
      </el-col> -->
    </el-row>
    <!-- <el-row>
      <el-col :span="12">
        <div class="echart" id="pieChart" :style="pieChartStyle"></div>
      </el-col>
    </el-row> -->
  </el-row>
</template>
  
  <script>
import * as echarts from "echarts";
import PanelGroup from "@/components/PanelGroup";
import { batchemp } from "@/api/system/departmentcount";

export default {
  name: "Count",
  components: {
    PanelGroup,
  },
  data() {
    return {
      lineChart: {},
      dynamicLineChartOption: {
        xAxis: {
          data: [
            "开发部",
            "测试部",
            "人事部",
            "总经办",
            "运营部",
            "技术部",
            "售后部",
          ],
        },
        // 图例
        legend: {
          data: ["部门人数"],
          top: "0%",
        },
        yAxis: {},
        series: [
          {
            name: "部门人数",
            type: "bar",
            data: [40, 50, 80, 30, 28, 50, 55, 18],
          },
        ],
      },
      yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
      taskDate: [10, 11, 9, 17, 14, 13, 14],
      myChartStyle: {
        float: "left",
        color: "#91cc75",
        width: "100%",
        height: "350px",
      }, //图表样式
      // 部门人数统计图表
      chartOptions: {
        chart: {
          id: "vuechart-example",
        },
        xaxis: {
          categories: [
            "开发部",
            "测试部",
            "运营部",
            "人事部",
            "策划部",
            "财务部",
            "销售部",
            "忧杂货部",
          ],
        },
      },
      // 饼图的展示数据
      pieChart: {},
      pieData: [
        // { value: 40, name: "开发部" },
        // { value: 38, name: "测试部" },
        // { value: 32, name: "运营部" },
        // { value: 30, name: "人事部" },
        // { value: 28, name: "策划部" },
        // { value: 26, name: "财务部" },
        // { value: 22, name: "销售部" },
        // { value: 18, name: "解忧杂货部" },
      ],
      pieName: [],
      pieChartStyle: { float: "left", width: "100%", height: "480px" }, //图表样式

      // 系统统计数据
      loading: true,
      stat: {
        register: 2837,
        barrage: 27920,
        tip_off: 489,
        online: 1387,
      },
    };
  },
  mounted() {
    // this.initEcharts();
    // 初始化饼图的基本信息
    // this.initDate(); //数据初始化
    // this.initPieEcharts();
  },
  methods: {
    initEcharts() {
      // 多列柱状图
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(this.dynamicLineChartOption);
      this.lineChart = myChart;
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    // 饼图的初始化数据
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        this.pieName[i] = this.pieData[i].name;
      }
    },
    initPieEcharts() {
      // 饼图
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          // 图例
          data: this.pieName,
          right: "10%",
          top: "bottom",
          orient: "vertical",
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "部门人数统计图示",
          bottom: "0",
          left: "30%",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            roseType: "area",
            top: "20%",
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              fontSize: "40",
              formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            labelLine: {
              show: false,
            },
            radius: [50, 250],
            center: ["40%", "40%"], //饼图半径
            data: this.pieData,
          },
        ],
      };
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.pieChart = echarts.init(document.getElementById("pieChart"));
      this.pieChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.pieChart.resize();
      });
    },
  },
  watch: {
    dynamicLineChartOption: {
      handler: function (n, o) {
        this.$refs.chart.updateOptions({
          series: n.series,
        });
      },
      deep: true,
    },
  },
  created() {
    batchemp().then(async (res) => {
      const temp = [],
        categories = [],
        categoriesData = [];
      res.data.forEach((item) => {
        temp.push(item);
        categories.push(item.name);
        categoriesData.push(item.value);
      });
      Object.assign(this.pieData, temp);
      this.dynamicLineChartOption.xAxis.data = categories;
      this.dynamicLineChartOption.series[0].data = categoriesData;
      this.chartOptions.xaxis.categories = categories;
      // 初始化多列柱状图
      await this.initEcharts();
      // 初始化饼图
      await this.initDate(); //数据初始化
      await this.initPieEcharts();
    });
  },
};
</script>

<style scope>
#apexchartsvuechart-example svg {
  /* position: absolute;
  top: -100px;
  left: 35px; */
}

.apexchart {
  /* position: absolute;
  top: 400px;
  left: 35px; */
}

#pieChart {
  /* position: absolute;
  top: 80px;
  right: 30px; */
}
</style>